Вопрос на засыпку.

[Arinden]

Добрый день! Возможно мой вопрос глупый и очевидный, но мне правда интересно. Что эффективнее использовать .png иконки или их html/css воплощение? Скажем я могу сделать стрелочку путём создания таблицы 15 на 15px и bgcolor по нужным ячейкам. Вес html кода будет приблизительно равен весу .png изображения. Из очевидных плюсов вижу только то, что при увеличении страницы иконка сохранит своё качество. Вот пример создания качественной иконки при помощи css3 (не моё). Вес чистого кода ~1900 байт. Вес этой иконки в .png приблизительно идентичен. Для меня последний пример слишком сложный для воплощения, но что-то банальное и простое таким образом или при помощи таблицы сделать всё же можно. Но надо ли?

[s0rr0w]

png кроссплатформеннее

[klierik]

вопрос ТС абстрактен. надо смотреть в рамках поставленной задачи в конкретном случае.

[psywalker]

Да ну, считаю, что каждому должно быть своё место. Иконки - это априори картинки, и приемущественно пнг-формата, они для этого и предназначены. А делать всякие извращения с полотном кода, ради одной картинки - считаю неправильным. CSS3 не для этого придумал, имхо. Фон на сайте себе лучше сделай)

[HeadShot]

CSS3 не для этого придумал, имхо. Фон на сайте себе лучше сделай)

Чушь несешь.

[psywalker]

CSS3 не для этого придумал, имхо. Фон на сайте себе лучше сделай)

Чушь несешь.

Обоснуй

Только сразу на примере: http://jsfiddle.net/hLNJe/

Вот здесь море кода ради одной иконки. Предположим таких иконок будет 20. Я бы лично сделал один пнг-спрайт, но ты смотришь в сторону CSS3. Обоснуй?

[HeadShot]

CSS3 не для этого придумал, имхо. Фон на сайте себе лучше сделай)

Чушь несешь.

Обоснуй

Только сразу на примере: http://jsfiddle.net/hLNJe/

Вот здесь море кода ради одной иконки. Предположим таких иконок будет 20. Я бы лично сделал один пнг-спрайт, но ты смотришь в сторону CSS3. Обоснуй?

Всему свое место. Картинки посчитали для такого лишними, хоть тебе и проще Я бы приложил голову и взять твиттеровский бутстрап за основу. Наделал бы цветов отталкиваясь от БЭМ и клепал бы кнопки, которые легко правятся, если надо(без фотошопа). Есть разница?

[psywalker]

CSS3 не для этого придумал, имхо. Фон на сайте себе лучше сделай)

Чушь несешь.

Обоснуй

Только сразу на примере: http://jsfiddle.net/hLNJe/

Вот здесь море кода ради одной иконки. Предположим таких иконок будет 20. Я бы лично сделал один пнг-спрайт, но ты смотришь в сторону CSS3. Обоснуй?

Всему свое место. Картинки посчитали для такого лишними, хоть тебе и проще Я бы приложил голову и взять твиттеровский бутстрап за основу. Наделал бы цветов отталкиваясь от БЭМ и клепал бы кнопки, которые легко правятся, если надо(без фотошопа). Есть разница?

Кнопки я бы скорее всего делал на CSS3, потому что вот там он как раз и нужен. Закруглённые углы, градиентный фон, да, меняй классы и радуйся. НО, у ТС речь зашла об иконках, которые, по сути, являются картинками и для них и предназначены. Ты же выбрал для этого БЭМ и CSS3. Обоснуй?

[HeadShot]

Не смотрел я что там. Че-то тупит у меня фидл, позже гляну. Дело в том, что все идет к простоте и более нативной реализации. Рано или поздно этот тренд придек и будет какое-то время. CSS и JS уже давно в виджетах, некоторых системных приложениях. Да те же маки, андроиды и ios. Как бы есть над чем задуматься. HTML5 и т.д.

Востребованы качественные иллюстрации, логотипы, но никак не сплошняковая картиночная структура. Это как бы тоже факт, который постепенно приходит.

[psywalker]

Не смотрел я что там. Че-то тупит у меня фидл, позже гляну. Дело в том, что все идет к простоте и более нативной реализации. Рано или поздно этот тренд придек и будет какое-то время. CSS и JS уже давно в виджетах, некоторых системных приложениях. Да те же маки, андроиды и ios. Как бы есть над чем задуматься. HTML5 и т.д.

Востребованы качественные иллюстрации, логотипы, но никак не сплошняковая картиночная структура. Это как бы тоже факт, который постепенно приходит.

Ааа, т.е. по твоему скоро все откажуться от картинок вообще и будут всё клепать на CSS3 что ли?)

Кстати, заодно, расскажи мне плз, как бы ты рисовал такие вот иконки на CSS3 и самое главное, расскажи мне, как бы ты, с помощью замены модификаторов, меняя только лишь фон или размер - смог бы видоизменить всю иконку в целом?

[HeadShot]

А давай мы не будем как бы делал я, идет? Я так же как и ты делаю отталкиваясь от того, что есть, ибо не дорос пока.

SVG

[psywalker]

А давай мы не будем как бы делал я, идет? Я так же как и ты делаю отталкиваясь от того, что есть, ибо не дорос пока.

Нет, без проблем, ты просто сказал А, я и попросил сказать Б. Я лишь преследую цель получить знания. Если ты сейчас мне обоснуешь всё по факту и как надо, то я с удовольствием изменю своё мнение на счёт понимания этих вещей.

[HeadShot]

А давай мы не будем как бы делал я, идет? Я так же как и ты делаю отталкиваясь от того, что есть, ибо не дорос пока.

Нет, без проблем, ты просто сказал А, я и попросил сказать Б. Я лишь преследую цель получить знания. Если ты сейчас мне обоснуешь всё по факту и как надо, то я с удовольствием изменю своё мнение на счёт понимания этих вещей.

Извини, вежливо откажусь хватит с меня

[psywalker]

А давай мы не будем как бы делал я, идет? Я так же как и ты делаю отталкиваясь от того, что есть, ибо не дорос пока.

Нет, без проблем, ты просто сказал А, я и попросил сказать Б. Я лишь преследую цель получить знания. Если ты сейчас мне обоснуешь всё по факту и как надо, то я с удовольствием изменю своё мнение на счёт понимания этих вещей.

Извини, вежливо откажусь хватит с меня

Эхх, жаль конечно. Так мне и придётся ходить с неправильным пониманием

[HeadShot]

А давай мы не будем как бы делал я, идет? Я так же как и ты делаю отталкиваясь от того, что есть, ибо не дорос пока.

Нет, без проблем, ты просто сказал А, я и попросил сказать Б. Я лишь преследую цель получить знания. Если ты сейчас мне обоснуешь всё по факту и как надо, то я с удовольствием изменю своё мнение на счёт понимания этих вещей.

Извини, вежливо откажусь хватит с меня

Эхх, жаль конечно. Так мне и придётся ходить с неправильным пониманием

Это уже твои проблемы Тебе наверное не я нужен, а кто-то другой

[lexxcode]

Я считаю клепать картинки, иконки на css3 это интересно только в плане концепта.

Помериться пи...ми кодами, решениями и гордиться своей крутостью накатать 100500 строк css ради никчемной иконки.

Графика должна быть графикой, css должен оставаться css'ом. А то будет как с таблицами, когда их стали пользовать для верстки каркаса.(хоть на то и были причины в позапрошлом поколении).

Я например для графики с удовольствием бы применял svg, но из-за не будем называть имя этого IE8-, заниматься шаманством гораздо дороже чем сделать png-спрайты

[psywalker]

Это уже твои проблемы Тебе наверное не я нужен, а кто-то другой

Да, возможно тот, кто это объяснит за тебя.

[buddah]

Фейл засчитан.

[psywalker]

Я считаю клепать картинки, иконки на css3 это интересно только в плане концепта.

Помериться пи...ми кодами, решениями и гордиться своей крутостью накатать 100500 строк css ради никчемной иконки.

Графика должна быть графикой, css должен оставаться css'ом. А то будет как с таблицами, когда их стали пользовать для верстки каркаса.(хоть на то и были причины в позапрошлом поколении).

Я например для графики с удовольствием бы применял svg, но из-за не будем называть имя этого IE8-, заниматься шаманством гораздо дороже чем сделать png-спрайты

Выходит мы с тобой одного мнения. Эхх, значит уже двое мыслят неправильно

[lexxcode]

Выходит мы с тобой одного мнения. Эхх, значит уже двое мыслят неправильно

Как теперь жить то?? Все пойду порежу слои фотошопу опасным css'ом

[HeadShot]

Фейл засчитан.

Зевнул... не на футболе вроде

[SelenIT]

Рисовать растровые картинки разметкой попиксельно — изврат в любом случае, годится разве что для подобного выпендрежа. Минусов масса (трудность поддержки, отсутствие кеширование, пагубное для SEO уменьшение доли смысловой части в документе и т.д.), плюсов не вижу вообще.

На голом CSS3, имхо, имеет смысл делать простые и повторяющиеся вещи типа стрелок, нестандартных маркеров списка, значков скрытия-раскрытия ветви дерева, "светофоров" при валидации форм и т.п. (плюсы — уменьшение числа HTTP-запросов и работа при отключенной графике, минус — неочевидность поддержки). Естественно, если это не требует добавочной разметки, чисто на псевдоэлементах. Для мало-мальски сложных иконок куда больше проку от объединения их в спрайт и запихивания этого спрайта в data-uri (опять же, минимум HTTP-запросов и кеширование всего оформления "одним куском").

В скором будущем, возможно, станут востребованы SVG-иконки, ждем вымирания старых браузеров и исправления багов сегодняшних. Еще есть забавный прием вставки иконок как символов экзотического шрифта, но это пока тоже скорее технический курьез). Хотя во многих случаях можно использовать unicode-символы.

[psywalker]

Рисовать растровые картинки разметкой попиксельно — изврат в любом случае, годится разве что для подобного выпендрежа. Минусов масса (трудность поддержки, отсутствие кеширование, пагубное для SEO уменьшение доли смысловой части в документе и т.д.), плюсов не вижу вообще.

На голом CSS3, имхо, имеет смысл делать простые и повторяющиеся вещи типа стрелок, нестандартных маркеров списка, значков скрытия-раскрытия ветви дерева, "светофоров" при валидации форм и т.п. (плюсы — уменьшение числа HTTP-запросов и работа при отключенной графике, минус — неочевидность поддержки). Естественно, если это не требует добавочной разметки, чисто на псевдоэлементах. Для мало-мальски сложных иконок куда больше проку от объединения их в спрайт и запихивания этого спрайта в data-uri (опять же, минимум HTTP-запросов и кеширование всего оформления "одним куском").

В скором будущем, возможно, станут востребованы SVG-иконки, ждем вымирания старых браузеров и исправления багов сегодняшних. Еще есть забавный прием вставки иконок как символов экзотического шрифта, но это пока тоже скорее технический курьез). Хотя во многих случаях можно использовать unicode-символы.

Спасибо за ответ, дружище, рад, что я думаю в эту же сторону.

HeadShot

А тебе советую прислушаться к вышесказанному, сделать выводы и впредь не пустословить на форумах.

[HeadShot]

Рисовать растровые картинки разметкой попиксельно — изврат в любом случае, годится разве что для подобного выпендрежа. Минусов масса (трудность поддержки, отсутствие кеширование, пагубное для SEO уменьшение доли смысловой части в документе и т.д.), плюсов не вижу вообще.

На голом CSS3, имхо, имеет смысл делать простые и повторяющиеся вещи типа стрелок, нестандартных маркеров списка, значков скрытия-раскрытия ветви дерева, "светофоров" при валидации форм и т.п. (плюсы — уменьшение числа HTTP-запросов и работа при отключенной графике, минус — неочевидность поддержки). Естественно, если это не требует добавочной разметки, чисто на псевдоэлементах. Для мало-мальски сложных иконок куда больше проку от объединения их в спрайт и запихивания этого спрайта в data-uri (опять же, минимум HTTP-запросов и кеширование всего оформления "одним куском").

В скором будущем, возможно, станут востребованы SVG-иконки, ждем вымирания старых браузеров и исправления багов сегодняшних. Еще есть забавный прием вставки иконок как символов экзотического шрифта, но это пока тоже скорее технический курьез). Хотя во многих случаях можно использовать unicode-символы.

Спасибо за ответ, дружище, рад, что я думаю в эту же сторону.

HeadShot

А тебе советую прислушаться к вышесказанному, сделать выводы и впредь не пустословить на форумах.

Ты бы следил немного за речью Я высказал свою точку зрения, которая может отличаться от твоей. И если даже большинство здесь присутствующих думает иначе, хотя лично я не испытываю каких-то предрассудков на этот счет вообще, это не дает тебе ни повода, ни права называть меня пустословом. Улавливаешь контекст? Каждый занимается тем, что ему ближе и волен развиваться в ту сторону, в которую ему больше нравится.

\-/ твое здоровье, не пересиживай

[psywalker]

Ты бы следил немного за речью Я высказал свою точку зрения, которая может отличаться от твоей. И если даже большинство здесь присутствующих думает иначе, хотя лично я не испытываю каких-то предрассудков на этот счет вообще, это не дает тебе ни повода, ни права называть меня пустословом. Улавливаешь контекст? Каждый занимается тем, что ему ближе и волен развиваться в ту сторону, в которую ему больше нравится.

Дык я же не спорю с тобой. Пустословием я называю то, когда человек что-то говорит, а доказать на деле это не может, вот и всё. Какие обиды? Разве я не прав? Для меня такие люди пустословы.

Ты всегда имеешь право на свою точку зрения, кто ж спорит, но ты будь любезен её отстоять, объяснить, почему ты так считаешь. Иначе твои слова - это пшик в воздух.